<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-coin"></i> 资金筹集</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`筹集(${funds.length})`" name="first">
                    <el-table :data="funds" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="message-title">【{{scope.row.fundTitle}}】{{scope.row.fundContent}}</div>
                                <div>
                                    【共需{{scope.row.fundMoney}}￥，人均{{scope.row.fundAvg}}￥】
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fundTime" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" type="danger" @click="pay(scope.$index)">支付</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {userFunds,pay} from '@/api'

    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                funds: []
            }
        },
        methods: {
            handleRead(index) {
                const item = this.unread.splice(index, 1);
                console.log(item);
                this.read = item.concat(this.read);
            },
            handleDel(index) {
                const item = this.read.splice(index, 1);
                this.recycle = item.concat(this.recycle);
            },
            handleRestore(index) {
                const item = this.recycle.splice(index, 1);
                this.read = item.concat(this.read);
            },
            userFunds(){
                userFunds().then(res => {
                    this.funds = res.data
                })
            },
            pay(index){
                this.$confirm('你将支付'+this.funds[index].fundAvg+'￥，确定支付？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let formdata = new FormData()
                    formdata.append('fundRecordFundId',this.funds[index].fundId)
                    pay(formdata).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '支付成功'
                            })
                            this.userFunds()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '支付失败,'+res.msg
                            })
                        }
                    })
                })
            }
        },
        mounted(){
            this.userFunds()
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

